<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
</head>
<body>
      <div id="box">

      </div>
      <script>
            // 1. 创建一个xhr对象;
            var xhr = new XMLHttpRequest();
            // 2. 配置xhr对象;
            xhr.open( "GET" , "./04_json.php" );
            // 3. 发送请求;
            xhr.send();
            // 4. 事件 :
            // ajax的事件触发是根据请求阶段来的;
            // readystate => 准备状态 ;
            // change  => 改变;
            xhr.onreadystatechange = function(){
                  // 共有 0 ~ 4 五个状态码 ;
                  // console.log(xhr.readyState);
                  // 成功的时候进行使用就可以了 : 
                  // 成功的状态码为 4 ; 
                  if(xhr.readyState === 4){
                        // 数据被放在 xhr.responseText;这里
                        // console.log(xhr.responseText);
                        var obj = JSON.parse(xhr.responseText);
                        var html = "";
                        for(var attr in obj){
                              html += "<p>key值为 : " + attr + " , value值为:" + obj[attr ]+ "</p>";
                        }
                        document.querySelector("#box").innerHTML = html;
                  }
            }

      </script>
</body>
</html>